<template>
  <div ref="container">
    <a-modal
      :title="title"
      :width="800"
      :ok=false
      :visible="visible"
      :confirmLoading="confirmLoading"
      :getContainer="() => $refs.container"
      :maskStyle="{'top':'93px','left':'154px'}"
      :wrapClassName="wrapClassNameInfo()"
      :mask="isDesktop()"
      :maskClosable="false"
      :okButtonProps="{ props: {disabled: disableSubmit} }"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭"
      style="top:50px;height: 80%;">

      <a-spin :spinning="confirmLoading">

        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form layout="inline" >
            <a-row :gutter="18">
              <a-col :md="12" :sm="24">
                <a-form-item label="报价单模板分类" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-tree-select style="width:100%" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" allow-clear
                                 @select="onCategorySelect"
                                 :treeData="categoryTree" v-model="queryParam.categoryId" placeholder="请选择报价单模板分类">
                  </a-tree-select>
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item label="报价单模板" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select placeholder="请选择报价单模板" @select="onQuoteTemplateItemSelect" v-model="selectedQuoteTemplateId" allowClear>
                    <a-select-option v-for="qt in quoteTemplateList" :key="qt.id">
                      {{ qt.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <div>
          <a-table
            ref="table"
            size="small"
            bordered
            rowKey="id"
            :columns="defColumns"
            :dataSource="dataSource">
          </a-table>
        </div>

      </a-spin>




    </a-modal>
  </div>
</template>

<script>
import { getAction, httpAction } from '@/api/manage'
  import {  queryQuoteCategoryTreeList } from '@/api/api'
  import {mixinDevice} from '@/utils/mixin'
  import pick from 'lodash.pick'
  import ATextarea from 'ant-design-vue/es/input/TextArea'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  export default {
    name: "QuoteTemplateSelectModal",
    mixins: [mixinDevice],
    components: { ATextarea },
    data () {
      return {
        mode : '',
        id:'',
        categoryTree:[],
        dataSource:[],
        title:"操作",
        visible: false,
        disableSubmit:false,
        queryParam:{},
        selectedQuoteTemplateId:'',
        quoteTemplateList:[],
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
          name: {
            rules: [
              { required: true, message: '请输入名称!'},
              { validator: this.validateName}
            ]
          },
        },
        defColumns: [
          // {title: '图片', dataIndex: 'pic', width: 65, scopedSlots: { customRender: 'customPic' }},
          // {title: '子系统', dataIndex: 'subSystem', width: 80},
          {title: '名称', dataIndex: 'materialInfo.name', width: 120, scopedSlots: { customRender: 'customName' } },
          {title: '类别', dataIndex: 'materialInfo.categoryName', width: 100 },
          {title: '数量', dataIndex: 'count', width: 80},
          {title: '单位', dataIndex: 'materialInfo.unit', width: 50 ,
            customRender:function (t,r,index) {
              if (r) {
                let name = t?t:r.unitName
                if(r.sku) {
                  return name + '[SKU]';
                } else {
                  return name;
                }
              }
            }
          },
          {title: '单价（元）', dataIndex: 'materialInfo.wholesaleDecimal', width: 100},
          // {title: '编码', dataIndex: 'materialInfo.fullBarCode', width: 80},
          // {title: '条码', dataIndex: 'materialInfo.mBarCode', width: 80},
          // {title: '制造商', dataIndex: 'materialInfo.mfrs', width: 120 },
          { title: '规格型号', dataIndex: 'materialInfo.model', width: 120 },
          { title: '尺寸', dataIndex: 'materialInfo.otherField1', width: 80 },
          { title: '材质', dataIndex: 'materialInfo.caizhi' , width: 80},
          { title: '标准', dataIndex: 'materialInfo.biaozhun', width: 80 },
          { title: '连接形式', dataIndex: 'materialInfo.lianjie', width: 80 },
          { title: '抛光要求', dataIndex: 'materialInfo.paoguangdu', width: 80 },
          { title: '密封形式', dataIndex: 'materialInfo.mopian' , width: 80},
          { title: '长度', dataIndex: 'materialInfo.changdu' , width: 80},
          { title: '温度', dataIndex: 'materialInfo.otherField2', width: 80 },
          { title: '压力', dataIndex: 'materialInfo.otherField3' , width: 80},
          { title: '其他技术参数', dataIndex: 'materialInfo.standard', width: 120 },
          // {title: '型号', dataIndex: 'model', width: 120},
          // {title: '其他技术参数', dataIndex: 'standard', width: 120},
          // {title: '颜色', dataIndex: 'color', width: 70 },
          // {title: '扩展信息', dataIndex: 'materialOther', width: 100 },

          // {title: '库存', dataIndex: 'materialInfo.stock', width: 50,
          //   scopedSlots: { customRender: 'customRenderStock' }
          // },
          // {title: '面价', dataIndex: 'wholesaleDecimal', width: 80},
          // {title: '采购单价', dataIndex: 'purchaseDecimal', width: 80},
          // {title: '成本价', dataIndex: 'lowDecimal', width: 80},
          // {title: '仓位货架', dataIndex: 'position', width: 80},
          {title: '备注', dataIndex: 'materialInfo.remark', width: 80},
          {title: '状态', dataIndex: 'enabled', align: "center", width: 60,
            scopedSlots: { customRender: 'customRenderEnabled' }
          }
        ],
        url: {
          list: "/quote/template/item/list?quoteTemplateId="+this.quoteTemplateId,
          delete: "/quote/template/item/delete",
          add: "/quote/template/item/add",
          edit: "/quote/project/item/edit",
        }
      }
    },
    created () {
    },
    methods: {
      showModal (quoteProject) {
        this.visible = true
        this.title = '导入报价模板: '+quoteProject.name
        this.loadQuoteTemplateCategoryTreeData();
      },
      loadQuoteTemplateCategoryTreeData(){
        let that = this;
        let params = {};
        params.id='1';
        queryQuoteCategoryTreeList(params).then((res)=>{
          if(res){
            that.categoryTree = [];
            for (let i = 0; i < res.length; i++) {
              let temp = res[i];
              that.categoryTree.push(temp);
            }
          }
        })
      },
      onCategorySelect(quoteCategoryId){
        this.quoteTemplateList = []
        this.quoteTemplateId = ''
        let list_url = "/quote/template/list?quoteCategoryId="+quoteCategoryId;
        getAction(list_url,{}).then(res=>{
          this.quoteTemplateList = res.data.list;
        })
      },
      onQuoteTemplateItemSelect(quoteTemplateId){
        this.quoteTemplateId = quoteTemplateId;
        this.url.list = "/quote/template/item/list?quoteTemplateId="+this.quoteTemplateId
        this.queryQuoteTemplateItemList()
      },
      queryQuoteTemplateItemList() {
        return new Promise((resolve, reject) => {
          getAction(this.url.list, {})
            .then(res => {
              // 更新数据
              this.dataSource = res.data.list;
              resolve(); // 数据加载完成
            })
            .catch(err => {
              reject(err);
            });
        });
      },
      close () {
        this.$emit('close');
        this.disableSubmit = false;
        this.visible = false;
      },
      handleOk () {
        // 触发表单验证
        this.$emit('ok', this.quoteTemplateId)
        this.close();
      },
      handleCancel () {
        this.close()
      },
    }
  }
</script>

<style scoped>
  @import '~@assets/less/common.less';
</style>